import React from 'react'
import { getListMusic } from '../api/jxx'

import '../assets/css/list.css'
class Music extends React.Component {
    constructor() {
        super()
        this.state = {
            list: []
        }
    }
    componentDidMount() {
        const that = this
        getListMusic(this.props.id).then(res => {
            that.setState({
                list: [...res.playlist.tracks.splice(0, 3)]
            })
        })
    }
    render() {
        // let musicArr = this.props.listmusic
        return (
            <ul className='music--list'>
                {this.state.list.map((item, index) => {
                    return (
                        <li key={item.id} style={{ listStyle: 'none' }}><p className='musictitle'>{index + 1}.{item.name} -- {item.ar[0].name}</p></li>
                    )
                })}
            </ul>
        )
    }
}
export default Music;